@extends('layouts.system')

@section('css')
    <link rel="stylesheet" type="text/css"
          href={{ URL::asset('/system/js/bootstrap.datetimepicker/css/bootstrap-datetimepicker.min.css')}} />
    <style type="text/css">
        .infoItem {
            margin: 10px 0;
            line-height: 18px;
        }

        .infoItem .desc {
            width: 120px;
            font-size: 18px;
            color: #000;
        }

        .infoItem .stateValue {
            font-size: 18px;
            color: #012aff;
            text-decoration: underline;
        }

        .infoItem .value {
            font-size: 14px;
        }
    </style>
@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">
        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">任务发布&#62;&#62;编辑任务</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">
                        <div class="row">
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc" style="line-height: 35px;">发布时间</div>
                                <div class="col-sm-9 value">
                                    <div class="input-group date datetime" style="width: 250px;"
                                         data-date-format="yyyy-mm-dd hh:ii">
                                        <input value="{{!empty($release_time) ? $release_time : ''}}" id="releasetime" class="form-control" size="16" type="text" readonly="">
                                        <span class="input-group-addon btn btn-primary"><span
                                                    class="glyphicon glyphicon-th"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc" style="line-height: 35px;">截止时间</div>
                                <div class="col-sm-9 value">
                                    <div class="input-group date datetime" style="width: 250px;"
                                         data-date-format="yyyy-mm-dd hh:ii">
                                        <input id="deadlime" value="{{!empty($deadlime) ? $deadlime : ''}}" class="form-control" size="16" type="text" readonly="">
                                        <span class="input-group-addon btn btn-primary"><span
                                                    class="glyphicon glyphicon-th"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc" style="line-height: 35px;">审核时长</div>
                                <div class="col-sm-9 value">
                                    <input v-model="formData.audit_time" type="number" class="form-control" placeholder="小时" style="width: 150px;">
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem" style="line-height: 35px;">
                                <div class="col-sm-3 desc">发布数量</div>
                                <div class="col-sm-9 value">
                                    <input v-model="formData.number" type="text" class="form-control" placeholder="" style="width: 150px;">
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem" style="line-height: 35px;">
                                <div class="col-sm-3 desc">标签</div>
                                <div class="col-sm-9 value">
                                    <div id="datatable-icons_length" class="dataTables_length" style="width: 150px;">
                                        <select v-model="formData.label" size="1" class="form-control">
                                            <option value="1">互动</option>
                                            <option value="2">体验</option>
                                            <option value="3">分享</option>
                                            <option value="4">游戏</option>
                                            <option value="5">其它</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem" style="line-height: 35px;">
                                <div class="col-sm-3 desc">是否推荐</div>
                                <div class="col-sm-9 value">
                                    <div class="dataTables_length" style="width: 150px;">
                                        <select v-model="formData.isrecommend" size="1" class="form-control">
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            @if(!in_array($auth['auth'],['group_a']) && !empty($id))
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务佣金</div>
                                <div class="col-sm-9 value">
                                    <input disabled v-model="formData.money" type="number" class="form-control" placeholder="" style="width: 150px;">
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">推荐返利</div>
                                <div class="col-sm-9 value">
                                    <input disabled v-model="formData.rebate" type="number" class="form-control" placeholder="" style="width: 150px;">
                                </div>
                            </div>
                            @else
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">任务佣金</div>
                                    <div class="col-sm-9 value">
                                        <input v-model="formData.money" type="number" class="form-control" placeholder="" style="width: 150px;">
                                    </div>
                                </div>
                                <div class="col-sm-12 infoItem">
                                    <div class="col-sm-3 desc">推荐返利</div>
                                    <div class="col-sm-9 value">
                                        <input v-model="formData.rebate" type="number" class="form-control" placeholder="" style="width: 150px;">
                                    </div>
                                </div>
                            @endif
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务标题</div>
                                <div class="col-sm-9 value">
                                    <input v-model="formData.title" type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务说明</div>
                                <div class="col-sm-9 value">
                                    <textarea v-model="formData.task_desc" class="form-control" style="min-height: 120px;"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">任务图例</div>
                                <div class="col-sm-9 value">
                                    <div class="row" style="width: 100%">
                                        <ul>
                                            <li v-for="( image , index ) in images" style="float: left; margin: 10px;">
                                                <img v-bind:src="image" style="width: 70px; height: 70px">
                                                <br>
                                                <button v-on:click="deleteImage(index)" style="margin: 5px 0px 0px " class="btn btn-block btn-sm btn-danger">删除</button>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="row">
                                        <Upload
                                                multiple
                                                type="drag"
                                                :on-success="handleSuccess"
                                                action="/admin/task/uploadImages">
                                            <div style="padding: 20px 0">
                                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                                <p>点击或将图片拖拽到这里上传</p>
                                            </div>
                                        </Upload>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">步骤说明</div>
                                <div class="col-sm-9 value">
                                    <textarea v-model="formData.step_desc" class="form-control" style="min-height: 120px;"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div style="margin: 50px 0 0 120px;">
                                <button v-on:click="submit" style="font-size: 18px; padding: 5px; margin: 0 10px;">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript"
            src="{{ URL::asset('/system/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js')}}"></script>
    <script type="text/javascript"
            src="{{ URL::asset('/system/js/bootstrap.datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js')}}"></script>
    <script type="text/javascript">

      $('#releasetime').val('2017-06-06 09:00:00');

      Vue.use(VueResource)
      var app = new Vue({
        el: '#pcont',
        data: {
          images: [],
          formData: {}
        },
        created: function () {
          @if(!empty($details))
                this.formData = {!! $details !!}
                this.images = this.formData.images_arr;
                $('#releasetime').val(this.formData.releasetime);
                $('#deadlime').val(this.formData.deadlime);

          @endif
        },
        methods: {
          handleSuccess: function (response, file, fileList) {
            console.log(this);
            var _this = this
            console.log(response)
            if (response.state == 1) {
              _this._data.images.push(response.data)
            }
            console.log(_this._data)
          },
          deleteImage: function (index) {
            this.images.splice(index,1)
            console.log(this.images);
          },
          submit: function () {
            submit(this);
          }
        }
      })
      // 审批任务
      function submit(_vm) {
        var data = _vm.formData;
        data.images = _vm.images;
        data.release_time = $('#releasetime').val();
        data.deadlime = $('#deadlime').val();
        _vm.$http.post("/admin/task/save/{{!empty($id) ? $id : ''}}", data, {headers: header()})
          .then(function (response) {
            var json = response.body;
            alert(json.msg);
            if (json.state == 1) {
              window.location.reload()
            }
          }).catch(function (response) {
          console.log(response)
        })
      }

      $(function () {
        $(".datetime").datetimepicker({
          language: 'zh-CN',
          autoclose: true,
          todayHighlight: true,
        });
      })

    </script>
@endsection